<template>
	<view class="content">
		<view class="bg"></view>
		<view class="bg2"></view>
		<view class="tips">
			<text class="title">新用户注册</text>
			<text class="subtitle">登录后享受更好的服务体验~</text>
		</view>
		<view class="form-box">
			<button class="btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">立即注册</button>
		</view>
	</view>
</template>

<script>
	import {
		sendCode,
		register,
		GetOpenid,
		GetPhone,
	} from "@/api/api.js"
	export default {
		data() {
			return {
				time: 60,
				timer: '',
				phone: '',
				code: '',
				is_send: true,
				username: '',
				password: '',
				password2: '',
				pay_password: '',
				code: '',
				loading: false,
				nation: '',
				range: [],
				name: '',
				type: 1,
				shop_code: '',
				open_id: ''
			}
		},
		onLoad(option) {
			this.getMpOpenid()
			if (option.type) {
				this.type = option.type
			}
			if (option.shop_code) {
				this.shop_code = option.shop_code
			}
			if (option.recommend_code) {
				this.code = option.recommend_code
			}
		},
		methods: {
			getMpOpenid() {
				var that = this
				// #ifdef MP-WEIXIN
				uni.login({
					success(res) {
						GetOpenid({
							code: res.code
						}).then(data => {
							that.open_id = data.data
						})
					}
				})
				// #endif
			},
			getPhoneNumber(e) {
				var that = this
				that.loading = true
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					let encryptedData = e.detail.encryptedData
					let errMsg = e.detail.errMsg
					let iv = e.detail.iv
					let code = e.detail.code
					GetPhone({
						openid: that.open_id,
						code
					}).then(res => {
						that.loading = false
						if (res.status == 1) {
							let data = res.data
							register({
								openid: that.open_id,
								type: that.type,
								shop_code: that.shop_code,
								phone: data
							}).then(res => {
								if (res.status == 1 || res.status == 2) {
									setTimeout(() => {
										uni.setStorageSync('token', res.data)
										uni.switchTab({
											url: '/pages/index/index'
										})
									})
								} else {
									uni.$showMsg(res.message)
								}
							})
						} else if (res.status == 2) {
							setTimeout(() => {
								uni.setStorageSync('token', res.data)
								uni.switchTab({
									url: '/pages/index/index'
								})
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="scss">
	.content {
		width: 100vw;
		height: 100vh;
		background-color: #ffffff;

		.tips {
			padding-top: 200rpx;
			padding-left: 80rpx;
			display: flex;
			flex-direction: column;

			.title {
				line-height: 70rpx;
				font-weight: bold;
				font-size: 50rpx;
			}

			.subtitle {
				line-height: 70rpx;
				font-size: 30rpx;
				font-weight: bold;
				color: #b0b0b1;
			}

		}

		.bg {
			position: fixed;
			top: -250rpx;
			right: -250rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #D83428;
			z-index: 2
		}

		.bg2 {
			position: fixed;
			top: -150rpx;
			right: -300rpx;
			width: 600rpx;
			height: 600rpx;
			border-radius: 100%;
			background-color: #D8342880;
			z-index: 1;
		}

		.form-box {
			padding-top: 180rpx;
			padding-left: 70rpx;
			width: 610rpx;

			.input-box {
				margin: 40rpx 0;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 100rpx;
				background-color: #f5f5f5;
				border-radius: 100rpx;
				width: 100%;

				input {
					flex: 1;
					height: 100%;
					font-size: 30rpx;
				}

				.left {
					padding: 0 30rpx;
					width: 35rpx;
					height: 35rpx;
				}

				.right {
					padding: 0 30rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.btn {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100rpx;
				border-radius: 100rpx;
				color: #FFFFFF;
				margin-top: 10vh;
				background: linear-gradient(to right, #D83428, #D8342880);
			}

			.btn2 {
				border: 1px solid #D83428;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100rpx;
				border-radius: 100rpx;
				color: #D83428;
				margin-top: 2vh;
			}

			.other {
				display: flex;
				justify-content: space-between;

				text {
					line-height: 80rpx;
					font-size: 28rpx;
				}
			}
		}
	}
</style>